<template>
    <view class="change-password-container">
        <!-- 修改密码表单 -->
        <view class="password-form">
            <!-- 旧密码输入 -->
            <view class="input-group">
                <text class="input-label">旧密码</text>
                <view class="password-input">
                    <input class="input" :type="showOldPassword ? 'text' : 'password'" placeholder="请输入当前密码"
                        placeholder-class="placeholder" v-model="oldPassword" />
                    <text class="eye-icon" @click="toggleOldPassword">
                        {{ showOldPassword ? '👁️' : '👁️‍🗨️' }}
                    </text>
                </view>
            </view>

            <!-- 新密码输入 -->
            <view class="input-group">
                <text class="input-label">新密码</text>
                <view class="password-input">
                    <input class="input" :type="showNewPassword ? 'text' : 'password'" placeholder="请输入新密码"
                        placeholder-class="placeholder" v-model="newPassword" />
                    <text class="eye-icon" @click="toggleNewPassword">
                        {{ showNewPassword ? '👁️' : '👁️‍🗨️' }}
                    </text>
                </view>
                <text class="password-tip">密码长度至少6位，建议包含字母和数字</text>
            </view>

            <!-- 确认新密码输入 -->
            <view class="input-group">
                <text class="input-label">确认新密码</text>
                <view class="password-input">
                    <input class="input" :type="showConfirmPassword ? 'text' : 'password'" placeholder="请再次输入新密码"
                        placeholder-class="placeholder" v-model="confirmPassword" />
                    <text class="eye-icon" @click="toggleConfirmPassword">
                        {{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}
                    </text>
                </view>
                <text v-if="confirmPassword && confirmPassword !== newPassword" class="error-tip">两次输入的密码不一致</text>
            </view>

            <!-- 确认修改按钮 -->
            <button class="confirm-btn" @click="handleChangePassword" :disabled="!isFormValid">确认修改</button>
        </view>

        <!-- 加载提示 -->
        <uni-load-more v-if="loading" :status="'loading'" :content-text="{ loadingText: '处理中...' }"></uni-load-more>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { updateLoginPassword } from '@/api/index.js'

// 响应式数据
const oldPassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const showOldPassword = ref(false)
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)
const loading = ref(false)

// 计算属性：表单验证
const isFormValid = computed(() => {
    // 验证密码长度至少6位
    const isOldPasswordValid = oldPassword.value.length >= 6
    const isNewPasswordValid = newPassword.value.length >= 6
    // 验证两次输入的新密码是否一致
    const isPasswordMatch = newPassword.value === confirmPassword.value
    // 验证新密码不能与旧密码相同
    const isDifferentFromOld = newPassword.value !== oldPassword.value

    return isOldPasswordValid && isNewPasswordValid && isPasswordMatch && isDifferentFromOld
})

// 切换旧密码显示状态
const toggleOldPassword = () => {
    showOldPassword.value = !showOldPassword.value
}

// 切换新密码显示状态
const toggleNewPassword = () => {
    showNewPassword.value = !showNewPassword.value
}

// 切换确认密码显示状态
const toggleConfirmPassword = () => {
    showConfirmPassword.value = !showConfirmPassword.value
}

// 处理修改密码
const handleChangePassword = async () => {
    if (!isFormValid.value) {
        uni.showToast({
            title: '请检查输入信息',
            icon: 'none'
        })
        return
    }

    loading.value = true
    try {
        const data = uni.getStorageSync('data')
        // 调用修改密码API
        const res = await updateLoginPassword({
            driverUuid: data.driverUuid,
            mobileNumber: data.mobileNumber,
            password: newPassword.value,
        })

        // 检查修改是否成功
        if (res && res.code === 200) {
            uni.showToast({
                title: '密码修改成功',
                icon: 'success'
            })

            // 延迟返回登录页面，让用户看到成功提示
            setTimeout(() => {
                // 清除本地存储的token
                uni.removeStorageSync('token')
                uni.removeStorageSync('data')
                // 跳转到登录页面
                uni.redirectTo({
                    url: '/pages/login/index'
                })
            }, 1500)
        } else {
            uni.showToast({
                title: res?.message || '密码修改失败',
                icon: 'none'
            })
        }
    } catch (error) {
        console.error('修改密码失败:', error)
        uni.showToast({
            title: '网络异常，请稍后重试',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.change-password-container {
    padding-top: 40rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
}

/* 标题栏样式 */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100rpx;
    background-color: #fff;
    padding: 0 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-button {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-icon {
    font-size: 40rpx;
    color: #333;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.header-right {
    width: 60rpx;
}

/* 表单样式 */
.password-form {
    margin-top: 30rpx;
    padding: 0 40rpx;
}

.input-group {
    margin-bottom: 30rpx;
}

.input-label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.input {
    width: 100%;
    height: 90rpx;
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    background-color: #fff;
    box-sizing: border-box;
}

.placeholder {
    color: #999;
}

.password-input {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input .input {
    padding-right: 90rpx;
}

.eye-icon {
    position: absolute;
    right: 30rpx;
    font-size: 40rpx;
    color: #999;
}

.password-tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
}

.error-tip {
    font-size: 24rpx;
    color: #ff4d4f;
    margin-top: 8rpx;
}

/* 按钮样式 */
.confirm-btn {
    width: 100%;
    height: 90rpx;
    background-color: #007aff;
    color: #fff;
    font-size: 34rpx;
    font-weight: bold;
    border-radius: 10rpx;
    margin-top: 60rpx;
}

.confirm-btn[disabled] {
    background-color: #cccccc;
}
</style>
